<template>
  <div class="app-container">

		<!-- 列表 -->
    <el-table v-loading="loading" :data="functionalModelList" @row-click="handleRowClick"   >
      <el-table-column label="序号" align="center" width="55" type="index" />
			<!-- <el-table-column label="项目名称" align="center" prop="projectSystemName" show-overflow-tooltip /> -->
			<!-- <el-table-column label="功能分析名称" align="center" prop="functionalAnalysisName" show-overflow-tooltip/> -->
      <el-table-column label="作用组件" align="center" prop="sourceName" show-overflow-tooltip/>
      <el-table-column label="目标组件" align="center" prop="targetName" show-overflow-tooltip/>
      <el-table-column label="作用名称" align="center" prop="functionalName" show-overflow-tooltip />
			<el-table-column label="功能类型" align="center" prop="functionalType" show-overflow-tooltip>
			  <template #default="scope">
			    <span :style="{ color: scope.row.functionalType === '有害' ? 'red' : '' }">
			      {{ scope.row.functionalType }}
			    </span>
			  </template>
			</el-table-column>
      <el-table-column label="功能等级" align="center" prop="functionalLevel" show-overflow-tooltip>
				<template #default="scope">
					<span :style="{ color: (scope.row.functionalLevel === '不足' && '#FF8C00') || (scope.row.functionalLevel === '过量' && '#FF0000') || '' }">
						 {{ scope.row.functionalLevel }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="功能描述" align="center" prop="description" show-overflow-tooltip />
			<!-- 
			<el-table-column label="功能等级" align="center" prop="functionalLevel" show-overflow-tooltip>
			   <template #default="scope">
			    <span :style="{ color: scope.row.functionalLevel === '不足' ? '#FF8C00' : scope.row.functionalLevel === '过量' ? '#FF0000' : '' }">
			      {{ scope.row.functionalLevel }}
			    </span>
			   </template>   
			</el-table-column>
			 -->
      <template #empty>
        <el-empty />
      </template>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

	</div>
</template>

<script setup name="FunctionalModelFlaw">
import { listFunctionalModel, functionalModelFlawList  } from "@/api/business/functionalModel"

import { useRoute } from 'vue-router'
import store from "@/store"



const userName = store.state.value.user.name;//当前登陆用户
const route = useRoute()
const { proxy } = getCurrentInstance()
const functionalModelList = ref([])
const loading = ref(true)
const total = ref(0)


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
		projectId: route.query.id,
		createBy: userName,
  },
})

const { queryParams, form, rules } = toRefs(data)

/** 缺陷列表 - 查询功能建模表 */
function getList() {
  loading.value = true
  functionalModelFlawList(queryParams.value).then(response => {
    functionalModelList.value = response.rows;
		total.value = response.total
    loading.value = false
  })
}



onMounted(() =>{
	getList();
})

</script>
